<section [formGroup]="entityDetailsConfigForm" fxLayout="column">
  <mat-form-field class="mat-block" class="entity-fields-list">
    <mat-label translate>tb.rulenode.entity-details</mat-label>
    <mat-chip-list #detailsChipList required>
      <mat-chip
        *ngFor="let details of entityDetailsConfigForm.get('detailsList').value;"
        (removed)="removeDetailsField(details)">
        <span>
          <strong>{{entityDetailsTranslationsMap.get(details) | translate}}</strong>
        </span>
        <mat-icon matChipRemove>close</mat-icon>
      </mat-chip>
      <input matInput type="text"
             style="max-width: 200px;"
             #detailsInput
             (focusin)="onEntityDetailsInputFocus()"
             [formControl]="detailsFormControl"
             matAutocompleteOrigin
             #origin="matAutocompleteOrigin"
             [matAutocompleteConnectedTo]="origin"
             [matAutocomplete]="detailsAutocomplete"
             [matChipInputFor]="detailsChipList">
    </mat-chip-list>
    <mat-autocomplete #detailsAutocomplete="matAutocomplete"
                      class="tb-autocomplete"
                      (optionSelected)="detailsFieldSelected($event)"
                      [displayWith]="displayDetailsFn">
      <mat-option *ngFor="let details of filteredEntityDetails | async" [value]="details">
        <span [innerHTML]="entityDetailsTranslationsMap.get(details) | translate | highlight:searchText"></span>
      </mat-option>
      <mat-option *ngIf="(filteredEntityDetails | async)?.length === 0" [value]="null" class="tb-not-found">
        <div class="tb-not-found-content" (click)="$event.stopPropagation()">
          <div>
            <span translate>tb.rulenode.no-entity-details-matching</span>
          </div>
        </div>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <tb-error [error]="(detailsFormControl.touched &&
                     entityDetailsConfigForm.get('detailsList').hasError('required'))
                  ? translate.instant('tb.rulenode.entity-details-list-empty') : ''"></tb-error>
  <mat-checkbox fxFlex formControlName="addToMetadata" style="padding-bottom: 16px;">
    {{ 'tb.rulenode.add-to-metadata' | translate }}
  </mat-checkbox>
  <div class="tb-hint" translate>tb.rulenode.add-to-metadata-hint</div>
</section>
